<template>
<div class="detaile-paddingb">
    <van-nav-bar
        title="文章详情"
        fixed
        safe-area-inset-top
        left-arrow
        @click-left="onClickLeft"
        @click-right="onClickRight"
        >
        <template slot="right" >
            <van-icon name="ellipsis" size="22" color="gray" @click="showShare=true"/>
        </template>
    </van-nav-bar>
    <!-- 标题部分 -->
    <p class="headtitle titpadding">
        {{detaile.title}}
    </p>
    <p class="info compad">{{detaile.pubdate }} | {{detaile.read_count}} 阅读 | {{detaile.comm_count}} 评论</p>
    <van-cell class="authorinfo" :title="detaile.aut_name" title-style="font-size:.5rem;" center>
        <div slot="icon" class="headimg">
            <img :src="detaile.aut_photo" alt="">
        </div>
        <van-button v-if="!detaile.is_followed" @click="followed" :color="detaile.is_followed?'rgb(252,102,39)':'#fc6627'" class="gz" size="small" icon="plus"  round >关注</van-button>
        <van-button v-else-if="detaile.is_followed" @click="caclefollowed" type="default" class="gz" size="small"  round >已关注</van-button>
    </van-cell>
    <div class="detilecon compad" v-html="detaile.content"></div>
    <div class="compad"><van-divider>正文结束</van-divider></div>
    <!-- 评论列表 -->
    <div class="ping" id="ping" >
        <Comment :source='artid' :list='comlist' type="a" ref="artComList"/>
    </div>
    <!-- 评论弹窗 -->
    <comalert :popupshow="popupshow" :comlist="comlist" type="comment" :target="artid" @publishcom='publishcom' @hidepub="hidepub"></comalert>
    <!-- 底部导航 -->
    <footernags  @publishcom='publishcom' type="a" @showSharefun='showSharefun' :detaile='detaile' :artid="artid"></footernags>
    <van-share-sheet 
        v-model="showShare"
        title="立即分享给好友"
        :options="options"
    />
    <van-popup v-model="replyPopupShow"  closeable position="bottom" :style="{ height: '80%' }" >
       <reply :artid="artid" :thecomment="thecomment" />
    </van-popup>
</div>


</template>

<script>
import {
    getArticleDetaile,
    starauthor,
    caclestarauthor,
} from '@/api/article'
import Comment from '@/components/Comment'
import comalert from '@/components/comalert'
import footernags from '@/components/footernags'
import reply from '@/views/reply/reply.vue'
export default {
    components: {Comment,comalert,footernags,reply},
    props: {
        artid:{
            required:true,
            type:String
        }
    },
    data() {
        return {
            comlist:[],
            detaile:{},
            thecomment:'',
            showShare: false,
            replyPopupShow:false,
            options: [
                [
                { name: '微信', icon: 'wechat' },
                { name: '朋友圈', icon: 'wechat-moments' },
                { name: '微博', icon: 'weibo' },
                { name: 'QQ', icon: 'qq' },
                ],
                [
                { name: '复制链接', icon: 'link' },
                { name: '分享海报', icon: 'poster' },
                { name: '二维码', icon: 'qrcode' },
                { name: '小程序码', icon: 'weapp-qrcode' },
                ],
            ],
            popupshow:false
        };
    },
    watch: {
        // replyPopupShow(val){if(!val){
        //   console.log('关闭回复评论弹窗了')
        //   this.$refs.artComList.onLoad()
        // }}
    },
  computed: {},
  methods: {
    // 展示回复组件
    
    async getdetaile(){
        try{
            const {data}=await getArticleDetaile(this.artid);
            this.detaile=data.data
        }
        catch(err){
            this.$toast('获取失败')
        }
    },
    showSharefun(){
        this.showShare=true;
    },
    // 隐藏评论弹窗
    hidepub(){
        this.popupshow=false
    },
    //弹出评论弹窗
    publishcom(){
        this.popupshow=true
    },
    async followed(){
        try{
            const {data}= await starauthor(this.detaile.aut_id)
            if(data.message=='OK'){
                this.$toast('关注成功！')
                this.detaile.is_followed=true
            }else{
                this.$toast('系统错误')
            }
            
        }catch(err){
            this.$toast('操作失败')
        }
    },
    async caclefollowed(){
        const {status}= await caclestarauthor(this.detaile.aut_id)
        if(status=='204'){
            this.$toast('取消关注！')
            this.detaile.is_followed=false
        }else{
            this.$toast('系统错误')
        }
        
    },
    
    onClickLeft(){
        this.$router.push('/home')
    },
    onClickRight(){},
    },
    created() {
        this.$bus.$on('point_article_com',(data)=>{
            this.replyPopupShow=true
            this.thecomment=data
        })
    },
    mounted() {
        this.getdetaile()
    }
};
</script>
<style lang="less" scoped>
/deep/.van-nav-bar__arrow{
    color:gray!important
}

/deep/.detilecon,
/deep/.detilecon div,
/deep/.detilecon p,
/deep/.detilecon li{
    max-width: 100vw;
    // overflow-x: scroll;
    font-size:36px !important;
    white-space:break-spaces;
    margin-top:0;
    margin-bottom:0
}
/deep/.detilecon img{
    max-width: 100%
}
/deep/.detilecon.compad{
    padding-bottom:30px;
    white-space:inherit
}
/deep/.detilecon h1,
/deep/.detilecon h2,
/deep/.detilecon h3,
/deep/.detilecon h4,
/deep/.detilecon h5,
/deep/.detilecon h6{
    font-size:40px;
    margin-top:0;margin-bottom:0
}
/deep/.detilecon pre,/deep/.detilecon code{
    max-width:100vw;
    overflow-x: scroll;
    // background: #1e1e1e;
    // color:white;
    font-size:29px;
    padding:10px 20px 30px;
    box-sizing: border-box;
    white-space: pre-line;
}
.detilecon,.detilecon *{
    max-width: 100%;
    overflow-x: scroll
}
.headtitle{
    font-size:48px;
    margin-top:100px;
    color:#333;
    margin-bottom:0 
}
.info{
    font-size:30px;color:#a5a6ab;
    margin: 0;
}
.titpadding{
    padding:20px 24px;
    box-sizing: border-box;

}
.authorinfo{
    margin-top:20px;
}
.headimg{
    width:80px;height:80px;border-radius: 50%;overflow: hidden;margin-right:20px;
    img{
        width: 100%;
        height:100%;
    }
}
.compad{
    padding:0 24px;
}
.van-button::before{
    background-color:transparent!important;
}
/deep/.gz .van-button__icon{
    font-size:10px
}
/deep/.van-field__control{
    background-color:#ededed;
    padding:10px 20px;
    color:black;
    font-size: .4rem;
}
</style>